<template>
	<view class="container">
		<!-- 项目切换下拉选择 -->
		<view class="project-switcher">
			<picker class="project-picker" @change="switchProject" :value="projectIndex" :range="projectList"
				range-key="title">
				<view class="picker">
					当前项目：{{currentProjectTitle}}
					<view class="picker-icon">▼</view>
				</view>
			</picker>
		</view>
		<!-- Header -->
		<view class="header">
			<view class="headertop">
				<view class="header-left">
					<text class="title">专业课程学习中心</text>
					<view class="subtitle">提升技能，开拓视野，成就更好的自己</view>
				</view>
				<view class="header-right">
					<view class="progress-info">
						<view class="icon-circle">
							<text class="icon">🎓</text>
						</view>
						<view class="progress-text">
							<view class="label">当前进度</view>
							<view class="value">{{completedCount}}/{{totalCount}}</view>
						</view>
					</view>
				</view>
			</view>
			<button class="btn wfff" v-if="questionStatus == 1">
				考试完成
			</button>
			<button class="btn gray" v-if="questionStatus == 2">
				未完成学习
			</button>
			<button class="btn gray" @click="goanswer" v-if="questionStatus == 0">
				去答题
			</button>
		</view>



		<!-- Stats -->
		<view class="stats">
			<view class="stat">
				<view class="icon-box blue">📘</view>
				<view class="stat-text">
					<text class="label">总课程数</text>
					<view class="value">{{totalCount}}</view>
				</view>
			</view>
			<view class="stat">
				<view class="icon-box green">✅</view>
				<view class="stat-text">
					<text class="label">已完成</text>
					<view class="value">{{completedCount}}</view>
				</view>
			</view>
			<view class="stat">
				<view class="icon-box purple">⏱</view>
				<view class="stat-text">
					<view class="label">学习时长</view>
					<view class="value">{{totalDuration}}h</view>
				</view>
			</view>
		</view>

		<!-- Course List -->
		<view class="course-list">

			<view class="header-content">
				<text class="title">我的学习课程</text>
			</view>

			<view v-for="(course, index) in courseList" :key="course.id" class="course-card">
				<view class="course-info">
					<view class="course-title">
						<text class="name">{{course.title}}</text>
						<text class="tag blue" v-if="index === 0">热门</text>
						<text class="tag purple" v-else-if="index === 1">进阶</text>
						<text class="tag green" v-else>新手友好</text>
					</view>
					<text class="desc">{{course.info}}</text>
					<text class="duration">⏱ {{formatDuration(course.length_time)}}</text>
					<view class="progress">
						<view class="progress-bar">
							<view class="progress-fill green" style="width: 100%" v-if="course.study_status == 2">
							</view>
							<view class="progress-fill blue" style="width: 30%" v-else-if="course.study_status === 1">
							</view>
							<view class="progress-fill gray" style="width: 0%" v-else></view>
						</view>
						<view class="progress-label">
							<text>{{getStatusLabel(course.study_status)}}</text>
							<text>{{getProgressPercent(course.study_status)}}%</text>
						</view>
					</view>
				</view>
				<view class="">
					<button class="btn blue" @click.stop="goToCourse(course)"
						v-if="course.study_status === 2">已结束</button>
					<button class="btn blue" @click.stop="goToCourse(course)"
						v-else-if="course.study_status === 1">进行中</button>
					<button class="btn blue" @click.stop="goToCourse(course)" v-else>开始学习</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getStudyList,
		getTaskList
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				courseList: [],
				totalCount: 0,
				completedCount: 0,
				totalDuration: 0,
				projectId: "",
				projectList: [], // 项目列表
				currentProjectId: "", // 当前选中的项目ID
				currentProjectTitle: "", // 当前选中的项目标题
				projectIndex: 0, // 当前项目在数组中的索引
				questionStatus: "", // 答题状态
			}
		},
		methods: {
			// 获取项目列表
			async ongetTaskList() {
				const data = {
					teacherId: uni.getStorageSync("teacher").id
				}

				try {
					const res = await getTaskList(data);
					if (res.state === 'ok') {
						this.projectList = res.data.map(item => ({
							title: item.title,
							projectId: item.projectId
						}));

						// 默认选中第一个项目
						if (this.projectList.length > 0) {
							this.currentProjectId = this.projectList[0].projectId;
							this.currentProjectTitle = this.projectList[0].title;
							this.projectId = this.currentProjectId;
							this.ongetStudyList();
						}
					}
				} catch (err) {
					console.error(err);
				}
			},

			// 获取课程列表
			ongetStudyList() {
				let data = {
					teacherId: uni.getStorageSync("teacher").id,
					projectId: this.currentProjectId
				}
				getStudyList(data).then(res => {
					if (res.state === 'ok') {
						this.questionStatus = res.questionStatus
						this.courseList = res.data
						this.totalCount = res.data.length
						this.completedCount = res.data.filter(item => item.study_status === 2).length
						// 计算总时长（假设接口返回的是分钟）
						this.totalDuration = (res.data.reduce((sum, item) => sum + item.length_time, 0) / 60)
							.toFixed(1)
					}
				}).catch(err => {
					console.error(err)
				})
			},

			// 切换项目
			switchProject(e) {
				const index = e.detail.value;
				this.projectIndex = index;
				this.currentProjectId = this.projectList[index].projectId;
				this.currentProjectTitle = this.projectList[index].title;
				this.projectId = this.currentProjectId;
				this.ongetStudyList(); // 重新获取课程数据
			},

			formatDuration(minutes) {
				const hours = Math.floor(minutes / 60)
				const mins = Math.floor(minutes % 60)
				return `${hours}小时${mins > 0 ? `${mins}分钟` : ''}`
			},
			getStatusLabel(status) {
				switch (status) {
					case 1:
						return '学习中'
					case 2:
						return '已完成'
					default:
						return '未开始'
				}
			},
			getProgressPercent(status) {
				switch (status) {
					case 0:
						return '0'
					case 1:
						return '30' // 假设进行中是30%
					case 2:
						return '100'
					default:
						return '0'
				}
			},
			goToCourse(course) {
				// 将课程对象转为JSON字符串传递
				if(course.course_url){
					uni.navigateTo({
						url: `video?course=${encodeURIComponent(JSON.stringify(course))}`
					})
				}else{
					uni.navigateTo({
						url: `xueximsg?course=${encodeURIComponent(JSON.stringify(course))}`
					})
				}
			
			},
			goanswer() {
				uni.navigateTo({
					url: `/pages/TC/answer?projectId=${this.currentProjectId}`
				});
			}
		},
		onShow() {
			this.ongetTaskList()
		},
	}
</script>

<style>
	/* 项目选择器样式 */
	.project-switcher {
		margin: 30rpx 0;
	}

	.project-picker {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		font-size: 28rpx;
		color: #4b5563;
	}

	.picker {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.picker-icon {
		font-size: 24rpx;
		color: #9ca3af;
		margin-left: 20rpx;
	}

	/* 原有样式保持不变，新增以下样式 */

	.project-switcher {
		margin: 30rpx 0;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.project-list {
		white-space: nowrap;
		width: 100%;
	}

	.project-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		background: #f3f4f6;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #4b5563;
	}

	.project-item.active {
		background: #3b82f6;
		color: #fff;
		font-weight: bold;
	}

	/* 保持原有其他样式不变 */
	.container {
		padding: 30rpx;
		background: #f8fafc;
	}

	.header {
		background: linear-gradient(135deg, #3b82f6, #6366f1);
		padding: 40rpx;
		border-radius: 20rpx;
		color: #fff;
	}

	.headertop {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.header-left {
		flex: 1;
	}

	.header-right {
		margin-left: 20rpx;
	}

	.progress-info {
		display: flex;
		align-items: center;
	}

	.icon-circle {
		width: 60rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}

	.progress-text {
		margin-left: 20rpx;
		white-space: nowrap;
	}

	.label {
		font-size: 24rpx;
		line-height: 1.2;
	}

	.value {
		font-weight: bold;
		line-height: 1.2;
	}

	.stats {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.stat {
		background: #fff;
		padding: 30rpx;
		border-radius: 20rpx;
		flex: 1;
		align-items: center;
	}

	.icon-box {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}

	.icon-box.blue {
		background: #dbeafe;
	}

	.icon-box.green {
		background: #d1fae5;
	}

	.icon-box.purple {
		background: #ede9fe;
	}

	.stat-text {
		text-align: center;
	}

	.section-title {
		font-size: 32rpx;

	}

	.course-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		gap: 40rpx;
	}

	.course-info {
		flex: 1;
	}

	.course-title {
		display: flex;
		align-items: center;
	}

	.course-title .name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.answer {
		width: 200rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 20rpx;
		color: #333;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;
	}

	.tag {
		font-size: 20rpx;
		margin-left: 20rpx;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}

	.tag.blue {
		background: #dbeafe;
		color: #3b82f6;
	}

	.tag.purple {
		background: #ede9fe;
		color: #8b5cf6;
	}

	.tag.green {
		background: #d1fae5;
		color: #10b981;
	}

	.desc {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #6b7280;
	}

	.duration {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #6b7280;
	}

	.progress {
		margin-top: 20rpx;
	}

	.progress-bar {
		height: 10rpx;
		background: #e2e8f0;
		border-radius: 5rpx;
		width: 100%;
	}

	.progress-fill {
		height: 100%;
		border-radius: 5rpx;
	}

	.progress-fill.green {
		background: #10b981;
	}

	.progress-fill.blue {
		background: #3b82f6;
	}

	.progress-fill.gray {
		background: #d1d5db;
	}

	.header-content {
		padding: 24rpx 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #334155;
	}

	.progress-label {
		display: flex;
		justify-content: space-between;
		font-size: 20rpx;
		color: #6b7280;
		margin-top: 10rpx;
	}

	.course-action {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-top: 20rpx;
	}

	.status-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
	}

	.status-dot.green {
		background: #10b981;
	}

	.status-dot.blue {
		background: #3b82f6;
	}

	.status-dot.gray {
		background: #d1d5db;
	}

	.status-label {
		font-size: 24rpx;
		color: #4b5563;
		margin-top: 10rpx;
	}

	.btn {
		font-size: 26rpx;
		padding: 10rpx 30rpx;
		border-radius: 12rpx;
		color: #fff;
		text-align: center;
		margin-top: 20rpx;
	}

	.btn.blue {
		background: #3b82f6;
	}

	.btn.wfff {
		background: #fff;
		color: #333;
	}


	.btn.gray {
		background: #6b7280;
	}
</style>